<template>
    <div>
        <div class="self-top">
            <div class="self-top-item" @click="$router.push({ name: 'login' })">
                <van-image round width="72px" height="72px" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                <span class="username" v-if="uselogin.nickname == ' '">未登录</span>
                <div class="username" v-else>
                    {{ uselogin.nickname }}
                </div>
            </div>
            <div class="regsiter" @click="show =!show">
                设置
            </div>
            <van-action-sheet v-model:show="show" :actions="actions" cancel-text="取消" description="设置"
                close-on-click-action @select="openHandler" />
        </div>
        <div class="self-bottom">
            <div></div>
            <van-grid :border="false" :column-num="4" style="height: 200px;margin-top: 20px;">
                <van-grid-item @click="hanlderClick">
                    <van-icon name="todo-list-o" size="28" />
                    <p>我的订单</p>
                </van-grid-item>
                <van-grid-item @click="hanlderClick">
                    <van-icon name="refund-o" size="28" />
                    <p>优惠券</p>
                </van-grid-item>
                <van-grid-item @click="hanlderClick">
                    <van-icon name="guide-o" size="28" />
                    <p>我的足迹</p>
                </van-grid-item>
                <van-grid-item @click="$router.push({ name: 'address' })">
                    <van-icon name="location-o" size="28" />
                    <p>地址管理</p>
                </van-grid-item>
                <van-grid-item @click="hanlderClick">
                    <van-icon name="manager-o" size="28" />
                    <p>联系客服</p>
                </van-grid-item>
                <van-grid-item @click="hanlderClick">
                    <van-icon name="question-o" size="28" />
                    <p>帮助中心</p>
                </van-grid-item>
                <van-grid-item @click="hanlderClick">
                    <van-icon name="star-o" size="28" />
                    <p>我的收藏</p>
                </van-grid-item>
                <van-grid-item @click="$router.push({ name: 'feedback' })">
                    <van-icon name="edit" size="28" />
                    <p>意见反馈</p>
                </van-grid-item>
            </van-grid>
        </div>
    </div>
</template>

<script setup lang="ts">
import { showToast } from 'vant';
import { onMounted, ref } from 'vue'
import useLoginStore from '@/stores/login'
import router from '@/router';
import { LS_Pro } from '@/util/storage';
const hanlderClick = () => {
    showToast('抓紧开发中...');
}
const actions = [
      { name: '注册' },
      { name: '注销' },
    ];
const show =ref<boolean>(false)
const uselogin = useLoginStore()
const { getuserInfoHander } = uselogin
const openHandler =(action:{name:string}) =>{
    if(action.name =='注册'){
        router.push({name:'register'})
    }else if(action.name =='注销'){
        LS_Pro.remove('token')
        LS_Pro.remove('userid')
        router.push({name:'home'})
    }
}
onMounted(() => {
    getuserInfoHander()
})
</script>

<style scoped lang="scss">
.self-top {
    width: 100%;
    height: 175px;
    background-image: linear-gradient(to bottom right, rgb(14, 13, 13), rgb(114, 112, 112));
    position: relative;

    .self-top-item {
        width: 100%;
        height: 72px;
        position: absolute;
        left: 20px;
        top: calc(50% - 36px);
        margin: auto;
        display: flex;

        .username {
            align-items: center;
            line-height: 72px;
            margin-left: 20px;
            font-size: 16px;
            color: #ffff;
        }
    }

    .regsiter {
        width: 30px;
        margin-left: 35px;
        position: absolute;
        top: 10px;
        right: 10px;
        color: #fff;
    }
}
</style>